<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>班级教师管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<style>
		.class_back {
			width: 140px;
			height: 35px;
			background: #63cd5f;
			text-align: center;
			font-size: 18px;
			line-height: 35px;
			color: white;
			border-radius: 12px;
			margin-left: 2%;
			float: left;
		}

		.one {
			width: 9%;
		}

		.two {
			width: 27%;
		}

		.three {
			width: 9%;
		}

		.photo {
			width: 50px;
			height: 50px;
		}

		/* 模态框样式 */

		#modal-teach {
			position: fixed;
			/* 使用绝对定位或固定定位  */
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 9999999;
			background-color: rgba(62, 62, 62, 0.5);

		}


		.modal-data1-teach {
			width: 300px;
			height: 300px;
			margin: 170px auto;
			background-color: white;
			border-radius: 12px;

		}

		.modal_title {
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			position: relative;
			text-align: center;
			border-bottom: solid 1px #5c5c5c;

		}

		.modal-content {
			width: 250px;
			margin-left: 25px;
			border: solid 1px #8c8c8c;
			height: 160px;
			margin-top: 20px;
			background: #fbfbfb;
			border-radius: 4px;
		}

		.modal {
			width: 250px;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			padding-left: 20px;
			margin-top: 10px;

		}

		#course,
		#teacher {
			width: 180px;
			height: 35px;
			border: solid 1px #6b6b6b;
			margin-left: 10px;
			font-size: 14px;
			border-radius: 4px;
			text-align: center;

		}

		.button_close {
			width: 60px;
			height: 40px;
			background: whitesmoke;
			outline: none;
			float: right;
			margin-right: 25px;

		}

		.button_load {
			width: 60px;
			height: 40px;
			background: #3f94ff;
			color: white;
			outline: none;
			float: left;
			margin-left: 25px;
		}

		.search_img {
			position: absolute;
			right: 3%;
		}

		[v-if] {
			display: none;
		}

		.add {
			background-size: 150px 35px;
			width: 140px !important;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			margin-left: 2%;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.checkout_state {
			font-size: 12px;
			margin-left: 30px;
		}
	</style>
</head>

<body>
	<div id="vue-root">
		<div style="height: 37px">
			<div class="add" @click="add">添加授课信息</div>
			<div class="refresh" onclick="location.reload()">刷新</div>
			<input placeholder="请输入任教老师姓名" class="search" v-model="search.teacherName">
			<img src="../image/search.png" width="35px" height="35px" alt="" class="search_img" @click="getData0">
		</div>

		<div class="table ">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="two">班级</th>
						<th class="two">任课老师</th>
						<th class="two">课程</th>
						<th class="three">编辑/删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(classesInfo,index) in list" :key="classesInfo.id">
						<td class="one">
							<input type="checkbox" class="check-box" v-model="classesInfo.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="two" v-text="classesInfo.classesName"></td>
						<td class="two" v-text="classesInfo.teacherName"></td>
						<td class="two" v-text="classesInfo.courseName"></td>
						<td class="three">
							<div class="option">
								<div class="edit-icon option-icon" @click="edit(classesInfo)"
									style="left: 20%; top:30%;position: absolute;">
									<img class="img" height="20" width="20" src="../image/edit.png"
										onmouseover="this.src='../image/edit_light.png'"
										onmouseout="this.src='../image/edit.png'" />
								</div>
								<div class="delete-icon option-icon" @click="del([classesInfo.id])"
									style="right: 20%; top:30%;position: absolute;">
									<img class="img" height="20" width="20" src="../image/delete.png"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>

				</tbody>
			</table>
		</div>
		<br>
		<div class="delete long-background-img">
			<a onclick="history.back()" style="color: white">返回班级列表</a>
		</div>
		<div class="delete" @click="batchDelete">批量删除</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>

		<div id="modal-teach" v-if="show">
			<div class="modal-data1-teach">
				<div class="modal_title">
					<span v-text="classesInfo.classesName"></span>授课信息
				</div>
				<div class="modal-content">
					<div class="modal">老师
						<select name="teacher" v-validate="'required'" data-vv-as="老师" id="teacher"
							v-model="classesInfo.teacherId">
							<option :value="undefined" disabled="disabled">请选择老师</option>
							<option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id"
								v-text="teacher.name"></option>
						</select>
						<div class="checkout_state" v-text="err('teacher')"></div>
					</div>
					<div class="modal" style="margin-top: 35px;">课程
						<select name="course" v-validate="'required'" data-vv-as="课程" id="course"
							v-model="classesInfo.courseId">
							<option :value="undefined" disabled="disabled">请选择课程</option>
							<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
							</option>
						</select>
						<div class="checkout_state" v-text="err('course')"></div>
					</div>
				</div>
				<hr style="margin-top: 20px">
				<button class="button_close" @click="close">关闭</button>
				<button class="button_load" @click="submit">保存</button>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/vee-validate.min.js"></script>
	<script src="/scriptZIP/zh_CN.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>


	<script>

		VeeValidate.Validator.localize('zh_CN');
		Vue.use(VeeValidate, {
			locale: 'zh_CN'
		});

		var app = new Vue(merge({
			data: {
				classesInfo: {
					teacherId: null,
					courseId: null
				},
				show: false,
				teachers: [],
				courses: [],
				changed: false,
				urls: {
					del: '/pc/classesInfo/del'
				}
			},
			created: function () {
				var classesId = params().id;
				if (!classesId) {
					alert('未知班级');
					throw '未知班级';
				}
				this.classesInfo.classesId = classesId;
				this.getData();
				var schoolId = top_params().id;
				if (!classesId) {
					alert('未知学校');
					throw '未知学校';
				}

				axios.get('/pc/teacher/all/' + schoolId).then(function (res) {
					this.teachers = res.data;
				}.bind(this));

				axios.get('/pc/course/all/' + schoolId).then(function (res) {
					this.courses = res.data;
				}.bind(this));
			},
			methods: {
				getData: function () {
					axios.get('/pc/classesInfo/list/' + this.classesInfo.classesId, {
						params: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							teacherName: this.search.teacherName
						}
					}).then(this.setData);
				},
				close: function () {
					if (this.changed) this.getData();
					this.show = false;
				},
				add: function () {
					this.classesInfo.id = null;
					this.classesInfo.teacherId = null;
					this.classesInfo.courseId = null;
					this.show = true;
				},
				edit: function (classesInfo) {
					this.classesInfo = classesInfo;
					this.copy = copy(classesInfo);
					this.show = true;
				},
				submit: function () {

					this.$validator.validate().then(function (result) {
						if (result) {
							if (this.classesInfo.id) {
								var o = compare(this.classesInfo, this.copy);
								axios.put('/pc/classesInfo', o).then(function () {
									alert('成功');
									this.getData();
									this.changed = true;
									this.close();
								}.bind(this));
							} else {
								axios.post('/pc/classesInfo', this.classesInfo).then(function () {
									alert('成功');
									this.getData();
									this.changed = true;
									this.close();
								}.bind(this));
							}
						} else {
							alert("请输入完整信息！");
						}
					}.bind(this))
				},
				err: function (field) {
					return this.errors.has(field) ? '*' + this.errors.first(field) : null;
				}
			}
		}));
	</script>

</body>

</html>